<template>
  <div ref="gcontainer" id="mxgraph-container"></div>

    <div ref="jsexcel" id="jsexcel" style="width: 80%;"></div>


  <a-result status="403" title="403" sub-title="Sorry, you are not authorized to access this page.">
    <template #extra>
      <a-button type="primary">Back Home</a-button>
    </template>
  </a-result>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { mxgraph, mxgraphFactory } from 'ts-mxgraph'
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';

onMounted(() => {
  const gcontainer = ref(null)

  const { mxGraph, mxGraphModel } = mxgraphFactory({
    mxLoadResources: false,
    mxLoadStylesheets: false,
  })

  const container = document.getElementById("mxgraph-container");
  const model = new mxGraphModel();
  const graph = new mxGraph(container, model);

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  let parent = graph.getDefaultParent()

  // Adds cells to the model in a single step
  graph.getModel().beginUpdate()
  try {
    let v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
    let v2 = graph.insertVertex(parent, null, 'World', 200, 20, 80, 30)
    let v3 = graph.insertVertex(parent, null, 'you!', 400, 20, 80, 30)
    let e1 = graph.insertEdge(parent, null, '', v1, v2)
    let e2 = graph.insertEdge(parent, null, '', v2, v3)
  } finally {
    // Updates the display
    graph.getModel().endUpdate()
  }

  Spreadsheet.locale('zh-cn', zhCN);
  new Spreadsheet(document.getElementById('jsexcel'))
})
</script>
